<template>
  <!-- Excel 导入功能组件 -->
  <upload-excel :on-success="handleSuccess" />
</template>

<script>
import { formatExcelDate } from '@/utils'
import { importEmployee } from '@/api/employees'
export default {
  name: 'Excel',
  methods: {
    // 导入成功以后的回调函数
    // handleSuccess(dataObj) {
    //   // dataObj值 : { results: [], header: [] }
    //   console.log(dataObj.results, dataObj.header)
    //   let { results, header } = dataObj
    //   let { results: results, header: header } = { results: [], header: [] }
    // },
    // 函数形参的解构赋值(把原本对象里属性值直接赋予给key名对应的2个变量上)
    // 格式化数据:
    // 为什么: 因为后台要的是英文的key名, 但是表格读完是中文的key, 所以我们要把中文key转成英文的
    // 思路: 映射2个数据的关系 (一一对应关系)
    // 数组: 下角标和值映射关系
    // 对象: key和value的映射关系 (key可以随便定义, value也可以随便定义)

    async handleSuccess({ results, header }) {
      // 1. 准备映射的数据对象关系
      const obj = {
        '入职日期': 'timeOfEntry',
        '姓名': 'username',
        '工号': 'workNumber',
        '手机号': 'mobile',
        '转正日期': 'correctionTime'
      }
      // 2. 遍历读出来results数组, 拿到每个中文key的对象
      const newArr = results.map(item => {
        // 3. 拿到对象的每个中文key (for...in或者用Object.keys())
        // Object.keys(item) // 原地返回值, key名形成的字符串数组
        const zhKeyArr = Object.keys(item) // ['入职日期', '姓名', '工号', '手机号', '转正日期']
        // 4. 遍历中文key字符串, 每个出来, 去obj对象换取英文的key名
        const newObj = {} // 右侧
        zhKeyArr.forEach(zhKey => { // 遍历一次就映射过去一对key+value
          const enKey = obj[zhKey]
          // 5. (难) 自己新拼接一个对象(右侧)
          if (enKey === 'timeOfEntry' || enKey === 'correctionTime') {
            newObj[enKey] = formatExcelDate(item[zhKey])
          } else {
            newObj[enKey] = item[zhKey]
          }
        })
        // 6.遍历结束以后, 把item对象里值, 都赋予给了新对象里
        // 7. 把外面forEach换成map, 收集每次映射好的新对象, 形成一个大数组
        return newObj
      })
      console.log(results, header)
      console.log(newArr)
      const res = await importEmployee(newArr)
      console.log(res)
      // xlsx包, 读取表格里日期的时候, 会按照1900年01月01日进行天数的计算, 返回天数数字
      // 40000多天, 是1900年(当时的UTC时间算)->2019年过的天数 (了解: 在标准的0时上多加了8小时5分43秒) - 在1900年的时候, 时间是UTC+8:5:43 (不是正好的东8区)
      // 可以查询每个年份, 时区: https://www.timeanddate.com/time/zone/china/shanghai
      // 但是new Date() 是从1970年开始计算时间毫秒, 要把天数-掉1970-1900的70年天数
      // 剩余的天数就是1970年->2019年过的天数

      // 画图
      // 表格excel软件: 日期是以1900-1-0开始计算的，既1900-1-1就是1天；
      // 表格excel软件: 所以日期2019年3月10日 到 1900年1月1日 js打印得到的天数   43534
      // 验证: 可以把表格的单元格格式由时间转成文本是 43534
      // 所以这个天数多算了1月1日(1天)  一会儿得  -1天

      // js的时间是从: Date是以 1970-1-1 08:00:00 开始的
      // 传入的时间是从表格里读出来的, 如果传入new Date() 会多出来8个小时, 所以表格读出来的时间要-去8小时 (不太好想这句话, 多思考), 一会儿得, 表格的时间 -8小时

      // new Date是从1970年内部开始计算日期对象, 而你要传入的时间很长容易干到2089年去
      // 所以你传入给new Date的表格时间, 要把1970年之前的天数-减掉,  -
      // 验证: 1900年->1970年的时间
      // new Date('1970/01/01').getTime() - new Date('1900/01/01').getTime()
      // 一会儿得, 用表格的时间 -25567天, 多5分钟 43秒

      // 总结:
      // 表格的时间多了1天8小时5分43秒, 和25567天, 减掉以后再传入到new Date()里能正确表示年, 月, 日
      // 正常new Date()获取的时间都是多8小时的(北京时间), 而表格里的时间是0时区(标准时间)
    }
  }
}
</script>

<style lang="scss" scoped></style>
